<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myborder{
            border: 10px red solid;
            border-radius: 100px;
        }
        .myborder1{
            border: 15px green solid;
            /* border-radius: 50px; */
        }
        .myfont{
            font-weight: 1000;
            font-size: 60px;
        }
        .myimg{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="div1" class="myborder">div1</div>
    <img src="../img/1.png" width="100px" height="100px">
    <input type="text" id="username">
    <script>
        // js操作样式
        let div1=document.getElementById("div1")
        let img=document.getElementsByTagName("img")[0]
        // console.log(img)
        img.style.border="10px blue solid"
        img.style.borderRadius="60px"
        // img.src="../img/2.jpg"
        div1.className="myborder1"
        // div1.classList.add("myborder1")
        div1.classList.add("myfont")
        // div1.classList.toggle("myfont")
        // div1.remove("myfont")

        // 用于判断是否存在某个样式
        let flag=div1.classList.contains("myfont")
        console.log(flag)

        // 鼠标事件
        // 1.点击事件
        // 监听事件的方式一
        // img.onclick=()=>{
        //     console.log("121212")
        //     img.classList.toggle("myimg")
        // }
        // 监听事件的方式二
        img.addEventListener("click",function(){
            console.log("121212")
            img.classList.toggle("myimg")
        })
        // (2)移入移出移动事件
        img.addEventListener("mouseenter",()=>{
            console.log("鼠标移入")
        })
        img.addEventListener("mouseleave",()=>{
            console.log("鼠标移出")
        })
        img.addEventListener("mousemove",()=>{
            console.log("鼠标移动")
        })
        let username=document.getElementById("username")
        username.addEventListener("keydown",(event)=>{
            console.log(event.key,event.code)
        })
        username.addEventListener("keyup",function(){
            console.log("键盘抬起")
        })
    </script>
</body>
</html>